import React, { Component } from 'react'

import echarts from 'echarts';
import { Row, Col } from 'antd';

interface P {
  data: number
}

class Gauge extends Component<P> {

  UNSAFE_componentWillReceiveProps(props) {
    this.setGaugeChart(props.data)
  }

  setGaugeChart = (res) => {
    const color = res < 61 ? '#e61219' : (res < 81 ? '#ed7109' : ' #3d9b38')
    const colors = COLORS.map((v, index) => ([
      (index + 1) * 0.05, v
    ]))

    if (this.refs.yibiao) {
      let myChart = echarts.init(this.refs.yibiao);
      let option = {
        tooltip: {
          show: false,

        },
        series: [{
          name: '安全评分',
          type: 'gauge',
          radius: '100%',
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            show: true,
            lineStyle: {
              width: 3,
              shadowBlur: 0,
              color: colors
            }
          },

          splitNumber: 5,

          axisLabel: {
            textStyle: {
              fontSize: 12,
              fontWeight: ""
            }
          },
          itemStyle: {
            color: '#E61219',
            borderColor: '#E61219',
            shadowBlur: 0,
            opacity: 1
          },
          pointer: { show: true, width: '2', length: '35%', color: '#E61219' },
          title: {
            offsetCenter: [0, '-75%'],
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          detail: {
            formatter: '{value}分',
            offsetCenter: ['0', '-35%'],
            textStyle: {
              fontSize: 18,
              color
            }
          },

          axisTick: {            // 坐标轴小标记
            length: 5,
            width: 5,// 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: 'auto'
            }
          },
          splitLine: {           // 分隔线
            length: 5,
            width: 5,
            lineStyle: {
              color: 'auto'
            }
          },
          data: [{ value: res }]

        }, {//指针外环
          "type": 'pie',
          "hoverAnimation": false,
          "legendHoverLink": false,
          "radius": ['4%', '7%'],
          center: ['50%', '50%'],
          "label": {
            "normal": {
              "show": false
            }
          },
          "labelLine": {
            "normal": {
              "show": false
            }
          },
          "data": [{
            "value": 100,
            itemStyle: {
              normal: {
                color: "#E61219"
              }
            }
          }]
        }, {//指针内环
          "type": 'pie',
          "hoverAnimation": false,
          "legendHoverLink": false,
          "radius": ['0%', '4%'],
          center: ['50%', '50%'],
          "label": {
            "normal": {
              "show": false
            }
          },
          "labelLine": {
            "normal": {
              "show": false
            }
          },
          "data": [{
            "value": 100,
            itemStyle: {
              normal: {
                color: "#fff"
              }
            }
          }]
        },]

      }
      myChart.setOption(option)
    }
  };

  shouldComponentUpdate(props) {
    return props.data !== this.props.data
  }

  render() {
    return (
      <Row style={{ height: '100%' }}>
        <Col span={13} style={{ height: '100%' }}>
          <div ref='yibiao' style={{ width: '100%', height: '120%', marginTop: '8%' }}></div>
        </Col>
        <Col span={11} style={{ height: '100%' }}>
        <Row style={{ height: '100%', flexDirection: 'column' }} type='flex' justify="center">
            <Col span={24}>
              安全评分：<span style={{ fontSize: '16px', fontWeight: 500 }}>{this.props.data}</span>
            </Col>
          </Row>
        </Col>
      </Row>
    )
  }
}

export default Gauge

const COLORS = ['#f74025',
'#f8462c',
'#f8462c',
'#f8592e',
'#ff683d',
'#ff7743',
'#ff894c',
'#ff984c',
'#ff9e4a',
'#fbab4c',
'#edab4d',
'#e1ac4a',
'#d4ab46',
'#bcab3f',
'#a9ab39',
'#98ac35',
'#8cab2f',
'#86ab2d',
'#80ab2b',
'#7ca627']